import { Button, Image, List, Space, Toast } from "antd-mobile";
import { isValidArr, navigateTo } from "@/utils";
import { useEffect, useState } from "react";
import { useRouter } from "next/router";
import requewt from "@/utils/requewt";
import { API } from "@/config";
import callFeedback from "@/components/common/modalFeedback";
import { ListComp, StageComp } from "@/components/pages/rank";
import dayjs from "dayjs";

export default function () {
  const router = useRouter();

  const [type, setType] = useState(undefined);
  const [loading, setLoading] = useState(undefined);
  const [data, setData] = useState(undefined);
  const [self, setSelf] = useState(undefined);
  const [pasts, setPasts] = useState(undefined);
  const [current, setCurrent] = useState(undefined);

  useEffect(() => {
    (async () => {
      await handler.first();
    })()
  }, [])

  useEffect(() => {
    (async () => {
      console.log(`current`, current)
      if (!current) return;
      await handler.fetch(current?.id);
    })()
  }, [current])

  const handler = {
    fetch: async (id) => {
      Toast.show({icon: 'loading', content: '加载中'})

      let options = {body: {game_id: id}}
      const resp = await requewt(API.rank.entire, options)
      Toast.clear()
      if (resp?.error_code !== 0 || resp?.msg !== `ok`) {
        callFeedback({
          title: <div dangerouslySetInnerHTML={{__html: resp?.msg || `失败!`}}>
          </div>
        })
        return
      }

      setData(resp?.data?.lst);
      setSelf(resp?.data?.own);
    },
    first: async () => {
      Toast.show({icon: 'loading', content: '加载中'})
      const resp = await requewt(API.rank.entire)
      Toast.clear()
      if (resp?.error_code !== 0 || resp?.msg !== `ok`) {
        callFeedback({
          title: <div dangerouslySetInnerHTML={{__html: resp?.msg || `失败!`}}>
          </div>
        })
        return
      }

      setSelf(resp?.data?.own);
      setPasts(resp?.data?.forward_list);
      setCurrent(resp?.data?.forward_list[0]);
    },
    lottery: async () => {
      await navigateTo(`/wheel`)
    },
    portal: async () => {
      await navigateTo(`/portal`)
    },
    back: async () => {
      router.back()
    }
  }

  return (
    <>
      <div className="position-center">
        <h2 className="header">
          往期排行 <br />
          <small>
            （{dayjs(current?.start_date).format(`MM月DD日`)}-{dayjs(current?.end_date).format(`MM月DD日`)}）</small>
        </h2>

        {/*<StageComp data={data} self={self} />*/}

        <ListComp data={data} self={self} />

        <div className="footer">
          {
            isValidArr(pasts) && pasts.map((item, index) => {
              return <Button key={index} size={`small`} className={`act-btn act-btn-bevel`}
                             onClick={e => setCurrent(item)}>{item?.name}</Button>
            })
          }
        </div>
      </div>


    </>
  )
}